<template>
	<view>
		<view class="limit-product">
			<view class="title">
				<text>{{title}}</text>
				<uni-icons @click="close(1)" type="closeempty" size="20"></uni-icons>
			</view>
			<view class="scroll-content">
				<template v-for="(item, index) in limitProduct">
					<view class="l-item">
						<view class="l-contain">
							<view class="item-img-box">
								<image class="item-img" :src="item.thumPic" mode=""></image>
							</view>
							<view class="r">
								<view class="r1 xjs-line-one"><span v-if="item.openStatus3"
										class="tip1">{{ item.openStatus3 }}</span>{{ item.name }}</view>
								<view class="r2 xjs-line-one">
									<text v-if="item.skuProperties"
										v-for="(j, k) in JSON.parse(item.skuProperties)">{{ j.value }}<text v-if="(JSON.parse(item.skuProperties).length - 1) != k"> ; </text></text>
									<text v-else >默认规格</text>
								</view>
								<view class="r3">
									<view class="pr">￥{{item.price}}</view>
									<view class="num">x{{item.amount}}</view>
								</view>
								<view class="r4">
									<view class="xjs-mb-10" v-for="(j,k) in item.tipList">{{j}}</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="limitProduct.length != (index+1)" class="line"></view>
				</template>


			</view>
			<block v-if="limitType==1">
				<view class="btn">
					<view class="xjs-btn-primary-plain" @click="close(2)">返回上一页</view>
					<view v-if="show" class="xjs-btn-primary" @tap="close(3)">其他商品下单</view>
				</view>
			</block>
			<block v-if="limitType==2">
				<view class="btn">
					<view class="xjs-btn-primary-plain" @tap="close(2)">去调整</view>
				</view>
			</block>
			<block v-if="limitType==3">
				<view class="btn">
					<view class="xjs-btn-primary-plain" @tap="close(2)">返回上一页</view>
					<view class="xjs-btn-primary" @tap="close(4)">继续下单</view>
				</view>
			</block>

		</view>

	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, onMounted } from 'vue';
	const show = ref()
	const emits = defineEmits(['limitClose'])
	const props = withDefaults(
		defineProps<{
			limitProduct : any,
			productList : any
			title : string,
			limitType : number,
			productType : string
		}>(),
		{
			limitProduct: [],//下单前校验有问题的商品
			productList: [],//当前订单总商品
			title: "",
			limitType: 1,
			productType: 'product'
		}
	);
	const close = (close)=>{
		emits('limitClose', close)
	}
	const getList = () => {
		let arr = props.productList.reduce((pre, cur) => {
			return pre.concat(cur.shoppingCarVOlist || cur.shopData)
		}, [])
		console.log('arr', arr)
		console.log('this.limitProduct', props.limitProduct.length)
		if (arr.length != props.limitProduct.length) {
			show.value = true
		} else {
			show.value = false
		}
	}
	defineExpose({
		getList
	})
</script>

<style scoped lang="scss">
	.tip1 {
		display: inline-block;
		line-height: 1;
		border-radius: 50rpx;
		padding:4rpx 8rpx;
		border: 2rpx solid #6363FF;
		color: #6363FF;
		font-size: 24rpx;
		box-sizing: border-box;
		margin: 5rpx 6rpx 5rpx 0;
	}
	.limit-product {
		padding: 40rpx;
		box-sizing: border-box;
		word-break: break-all;

		.scroll-content {
			max-height: 60vh;
			overflow-y: scroll;

			.line{
				margin: 30rpx 0;
				border-top: 1rpx solid #E4E6E6;
			}
			.l-item {
				.l-contain {
					display: flex;
					justify-content: space-between;
					.item-img-box{
						width: 160rpx;
						height: 160rpx;
						position: relative;
						border-radius: 24rpx;
						overflow: hidden;
						.item-img {
							width: 160rpx;
							height: 160rpx;
						}
					}
			
					.r {
						width: calc(100% - 160rpx);
						padding-left: 16rpx;
						box-sizing: border-box;
						.r1 {
							width: 100%;
							font-size: 30rpx;
							padding: 5rpx 0 10rpx;
						}
			
						.r2 {
							width: 100%;
							color: #808080;
							font-size: 24rpx;
							margin-bottom: 16rpx;
						}
			
						.r3 {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 30rpx;
							.pr{
								color: var(--color-primary);
								font-weight: bold;
							}
						}
						.r4{
							color: var(--color-primary);
							font-size: 24rpx;
							margin-top: 16rpx;
						}
					}
				}
			
			}
		}

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #1b2120;
			font-size: 28rpx;
			font-weight: bold;
			padding-bottom: 30rpx;
			.close{
				font-weight: normal;
			}
		}

		.btn{
			margin-top: 30rpx;
			display: flex;
			gap: 32rpx;
			>view{
				
			}
		}
	}
</style>